<script setup>
import router from "../router";
import {onMounted, shallowReactive, shallowRef} from "vue";
import {ElMessage, ElNotification, } from "element-plus";
import {useStore} from "vuex";
import {useDark, useToggle} from "@vueuse/core";
import {RULE} from "../const/index.js";
import {PROJECT_NAME} from"../const/project.js";
import {getResponseData} from "../util/request.js";
import {isNotNull} from"../util/index.js";
import {loginByAccountApi} from"../api/ums/user.js";

const vuex = useStore();

/* ===================== 用户登录 ===================== */

//表单+表单数据+表单规则todo：上线后将默认值刷除
let loginForm = shallowRef();
let loginFormData = shallowReactive({username: 'admin', password:'123456789'});
let loginFormRules = {username: RULE.USERNAME, password: RULE.PASSWORD};

/**
 * 根据账号密码登录系统
 *
 * 1.验证表单，验证通过后发送登录请求。
 * 2.vuex修改登录状态。
 * 3.存储Token令牌，用户记录，用户角色列表和用户菜单记录。
 * 4.路由到Main页面。
 */

function login(){
  loginForm.value.validate(valid =>{
    if (valid){
      loginByAccountApi(loginFormData).then(res => {
        let data = getResponseData(res);
        if (isNotNull(data)) {
          ElMessage.success('登录成功！');
          vuex.dispatch('setLoginFlag', true);
          sessionStorage.setItem('token', data['token']);
          sessionStorage.setItem('loginMenus',JSON.stringify(data['menus']));
          sessionStorage.setItem('loginUser', JSON.stringify(data['user']));
          router.push('/Main');
        }
      });
    }
  });
}

/* ===================== 重置表单 ===================== */

/**
 * 重置表单
 */
function resetForm(){
  loginForm.value.resetFields();
}

/* ===================== 忘记密码 ===================== */

/**
 * ELNotification右上角通知：'员工测试账号：admin/123456789'
 */
function forgetPassword() {
  ElNotification.info({
    title:'通知列表',
    message:'员工测试账号: admin／123456789',
    position: 'top-right',
  });
}

/* ===================== 加载函数 ===================== */

/**
 * 1.使用暗黑模式。
 * 2.清空SessionStorage：
 * 3.vuex修改登录状态。
 */
onMounted(()=>{
  useToggle(useDark());
  sessionStorage.clear();
  vuex.dispatch('setLoginFlag', false);
});
</script>

<template>
  <section class="login-body">
    <el-card class="login-card" :header="PROJECT_NAME">
      <el-form class="login-form"
               ref="loginForm"
               status-icon
               :model="loginFormData"
               :rules="loginFormRules">
        <el-form-item prop="username" required>
          <el-input v-model="loginFormData['username']"
                    suffix-icon="User"
                    clearable
                    placeholder="输入账号 .."/>
        </el-form-item>
        <el-form-item prop="password" required>
          <el-input v-model="loginFormData['password']"
                    suffix-icon="Lock"
                    clearable
                    placeholder="输入密码 .."
                    show-password/>
        </el-form-item>
        <el-button class="login-btn"
                   type="primary"
                   @click="login">
          用户登录
        </el-button>
        <el-checkbox class="remember-cbx"
                     label="记住账号"
                     size="small"/>
        <el-button class="forget-btn"
                   link
                   size="small"
                   @click="forgetPassword">
          忘记密码
        </el-button>
        <el-button class="reset-btn"
                   link
                   size="small"
                   type="warning" @click="resetForm">
          重置内容
        </el-button>
      </el-form>
    </el-card>
  </section>
</template>

<style scoped lang="scss">
.login-body {
  height: 100vh; // 高度
  background: url("../assets/image/sea.png") no-repeat; // 背景图片（不平铺）
  background-size: 100% 100%; // 上下 左右
  padding-top: 200px; // 上内边距
  box-sizing: border-box; // 忽略内边距影响

  .login-card {
    margin: auto; // 自居中
    width: 50vh; // 宽度
    opacity: 0.95; // 透明度
  }

  .login-btn {
    width: 100%; // 宽度
    margin: 0 auto 10px; // 外边距
    letter-spacing: 2px; // 字母间距
  }

  .forget-btn, .reset-btn {
    float: right; // 右浮动
    line-height: 18px; // 行高
  }
}
</style>